<template>
  <div>
       <!-- 头部部分 -->
    <header class="header">
      <h1>todos</h1>
      <!-- .enter修饰符，捕获用户按下回车键 -->
      <input 
      v-model.trim="taskname"
      @keydown.enter="hAdd"
      class="new-todo" 
      placeholder="请输入任务名称" autofocus />
    </header>
  </div>
</template>

<script>
export default {

  data() {
    return {
      taskname:''
    };
  },

  methods: {
    hAdd(){
      //非空校验
          if(this.taskname ==='')return
        //用户按下回车键获取到用户输入的任务名
          // console.log(this.taskname);
          //2将任务名传递给父组件 子传父
          this.$emit('addTask',this.taskname)
          //3父组件接收任务名后加入数组
          //4清空文本框
          this.taskname=''
    }
      
      },
};
</script>

<style lang="scss" scoped>

</style>